<template>
    <div class="order-track-container" v-loading="loading">
      <div class="oneTrack">
        <div class="track-area">
          <div class="partTitle">交易信息</div>
          <div class="partLine"><div class="partTip">订单编号：</div><div class="partText">{{orderInfo.orderIdVO}}</div><i class="el-icon-copy-document" @click="copyText"></i></div>
          <div class="partLine"><div class="partTip">交易编号：</div><div class="partText">{{orderInfo.orderPayId}}</div></div>
          <div class="partLine"><div class="partTip">生成时间：</div><div class="partText">{{orderInfo.orderCreateTime}}</div></div>
          <div class="partLine"><div class="partTip">付款时间：</div><div class="partText">{{orderInfo.orderPayTime}}</div></div>
        </div>
        <div class="track-area">
          <div class="partTitle">预约信息</div>
          <div class="partLine"><div class="partTip">预约人：</div><div class="partText">{{orderInfo.userInfo?(orderInfo.userInfo.appointmentName+' '+orderInfo.userInfo.appointmentTel):''}}</div></div>
          <div class="partLine"><div class="partTip">预约备注：</div><div class="partText">{{orderInfo.userInfo?orderInfo.userInfo.appointmentDesc:''}}</div></div>
        </div>
        <div class="track-area">
          <div class="partTitle">服务信息</div>
          <div class="partLine"><div class="partTip">被服务人：</div><div class="partText">{{orderInfo.serveInfo?(orderInfo.serveInfo.servePerson +' '+orderInfo.serveInfo.serveTel):''}}</div></div>
          <div class="partLine"><div class="partTip">服务地址：</div><div class="partText">{{orderInfo.serveInfo?orderInfo.serveInfo.serveAddress:''}}</div></div>
          <div class="partLine"><div class="partTip">服务时间：</div><div class="partText">{{orderInfo.serveInfo?orderInfo.serveInfo.serveTime:''}}</div></div>
        </div>
        <div class="track-area">
          <div class="partTitle">护士信息</div>
          <div class="partLine"><div class="partTip">接单护士：</div><div class="partText">
           <div v-for="item in orderInfo.nurseInfo">{{ item.name+'('+item.id+') ' + item.tel }}</div></div></div>
          <div class="partLine"><div class="partTip">结算备注：</div><div class="partText">{{orderInfo.orderPayId}}</div></div>
        </div>
        <div class="track-area">
          <div class="partTitle">护理项目</div>
          <template v-for="item in orderInfo.items">
            <div class="flex-row" style="align-items: center;">
              <el-image style="width: 48px; height: 48px;border-radius: 2px;" :src="item.img" fit="cover"></el-image>
              <div class="mid-con">
                <div class="midTitle">{{item.itemName}}</div>
                <div class="midSubTitle">{{ item.combo }}</div>
              </div>
              <div class="right-num">x{{item.count}}</div>
            </div>
          </template>
        </div>
      </div>
      <div class="oneTrack">
        <el-timeline :reverse="true" style="margin-top: 25px;">
          <el-timeline-item placement="top"
            v-for="(activity, index) in setps"
            :key="index"
            :icon="activity.current?'el-icon-check':undefined"
            :color="activity.current?'#0979DE':undefined"
            :size="activity.current?'large':undefined"
            :timestamp="activity.time">
              <div class="con-area">
                <div class="status" :class="activity.current?'statusActive':''">{{activity.status}}</div>
                <div class="subDesc">{{activity.desc}}</div>
              </div>
            
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
</template>
<script>
  import { getOrderTrack} from "@/api/service/ordermanage";
  
  export default {
    name: "OrderTrack",
    props: ["row"],
    data() {
      return {
        setps:[],
        orderInfo:{},
        loading:false,
      };
    },
    created() {
      this.getTrackInfo();
    },
    watch:{
      'row': {
        handler: function (newVla, oldVal) {
          this.loading = true
          this.getTrackInfo();
        },
        deep: false,
      },
    },
    methods: {
      getTrackInfo(){
        let params = {orderId:this.row.orderId}
        getOrderTrack(params).then(response => {
          if(response.code!=200){
            this.loading = false;
            this.$message.error(response.msg);
            return
          }
          this.loading = false
          this.dealTrackData(response)
        }).catch(res => {
          this.$message.error(res);
          this.loading = false
        });
      },
      dealTrackData(res){
        let data = res.data
        this.orderInfo = res.data
        this.setps = data.process
      },
      async copyText() {
        try {
          await navigator.clipboard.writeText(this.orderInfo.orderIdVO);
          this.$message.success('复制成功');
        } catch (err) {
          console.error('复制失败', err);
          this.$message.error('复制失败');
        }
      }
    }
  };
  </script>

<style>
.order-track-container{
    padding-right: 10px;
    display: flex;
    .oneTrack{
      width: calc(50% - 10px);
      border-radius: 4px;
      background: #F2F3FF;
      margin-left: 10px;
      height: 680px;
      .el-timeline-item__timestamp{
        color: #0979DE;
      }
      .con-area{
        display: flex;
        font-size: 14px;
        color: #A7A7A7;
        .status{
          font-weight: bold;
          margin-right: 5px;
        }
        .status.statusActive{
          color: #0979DE;
        }
      }
      .track-area{
        padding: 10px 20px 0 17px;
        .partTitle{
          font-size: 16px;
          color: #101010;
          padding-left: 5px;
          border-left: 3px solid #0979DE;
          box-sizing: border-box;
          line-height: 16px;
          font-weight: bold;
        }
        .partLine{
          display: flex;
          margin-top: 10px;
          margin-left: 5px;
          font-size: 14px;
          color: #101010;
          line-height: 20px;
          .partTip{
            width: 70px;
            text-align: right;
            color: #9A9A9A;
          }
          .partText{
            max-width: calc(100% - 70px);
          }
          .el-icon-copy-document{
            color: #0979DE;
            font-size: 16px;
          }
        }
        .flex-row{
          display: flex;
          padding-left: 5px;
          .mid-con{
            width: calc(100% - 130px);
            padding-left: 5px;
          }
          .mid-con .midTitle{
            color: #3399F4;
            font-size: 14px;
          }
          .mid-con .midSubTitle{
            color: #BEBEBE ;
            font-size: 13px;
          }
          .right-num{
            width: 80px;
            text-align: right;
            padding-right: 10px;
            color: #101010;
            font-size: 14px;
          }
        }
      }
      
    }
}
</style>